<template>
  <div class="layout-page">
    <div class="top-box">
      <h1>班级管理</h1>
      <div class="user-info">
        <span>{{ userInfo.username }}</span>
        <el-avatar :size="40" :src="circleUrl" />
      </div>
    </div>
    <div class="content-box">
      <div class="menu-box">
          <el-menu
            active-text-color="#ffd04b"
            background-color="#545c64"
            class="menu-container"
            default-active="0"
            text-color="#fff"
          >
            <el-menu-item 
              v-for="(item, index) in menus" 
              :key="index" 
              :index="index + ''"
              @click="menuChange(item)"
            >
              <el-icon><Menu /></el-icon>
              <span>{{ item.name }}</span>
            </el-menu-item>
          </el-menu>
      </div>
      <div class="main-box">
        <div class="main-container">
          <router-view></router-view>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import storage from '@/utils/storage';
import { Menu } from '@element-plus/icons-vue';
import { useRouter } from 'vue-router';

const menus = [
  {
    name: '首页',
    path: '/home'
  },
  {
    name: '学生管理',
    path: '/student',
  },
  {
    name: '老师管理',
    path: '/teacher',
  },
  {
    name: '班级管理',
    path: '/class',
  },
  {
    name: '个人中心',
    path: '/profile',
  }
]

const userInfo = storage.get('userInfo')
console.log(userInfo);

const circleUrl = 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
const router = useRouter()
const menuChange = (item) => {
  console.log(item)
  router.push(item.path)
}
</script>

<style lang="scss" scoped>
.layout-page {
  .top-box {
    height: 60px;
    background-color: #545c64;
    display: flex;
    color: #fff;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    h1 {
      font-size: 24px;
      text-align: center;
      flex: 1;
    }
    .user-info {
      display: flex;
      align-items: center;
      cursor: pointer;
      span {
        margin-right: 10px;
    }
    }
  }
  .content-box {
    display: flex;
    height: calc(100vh - 60px);
    .menu-box {
      width: 200px;
      .menu-container {
        height: 100%;
      }
    }
    .main-box {
      flex: 1;
      background-color: #F2F3F5;
      padding: 16px;
      .main-container {
        width: 100%;
        height: 100%;
        background-color: #fff;
        padding: 16px;
        border-radius: 8px;
        box-shadow: 0 0 12px rgba($color: #000000, $alpha: 0.12);
      }
    }
  }
}
</style>